<template>
  <div style="height: 70vh">
    <MerakXTable
      :columns-by-store="JSON.parse(JSON.stringify(columns))"
      :columns="columns"
      :data="data"
      :pagination="false"
      :enabled-tree="true"
      :tree-transform="true"
    >
      <template #optinoal="{ row }">
        {{ row.optional }}
        <template v-if="row.link">
          <a :href="row.link" target="_blank">跳转</a>
        </template>
      </template>
    </MerakXTable>
  </div>
</template>

<script setup lang="tsx">
import { reactive } from "vue";

import MerakXTable, { MerakXTableColumn, MerakXTableData } from "../../../../../components/MerakXTable";

const columns = reactive<MerakXTableColumn[]>([
  { field: "prop", title: "属性名", treeNode: true, minWidth: 180 },
  { field: "explain", title: "说明", minWidth: 300 },
  { field: "type", title: "类型", minWidth: 200 },
  { field: "optional", title: "可选值", slots: { default: "optinoal" }, minWidth: 200 },
  { field: "default", title: "默认值", minWidth: 100 }
]);

const data = reactive<MerakXTableData[]>([
  { id: "props", parentId: null, prop: "Props", explain: "参数", type: "", optional: "", default: "" },
  {
    id: "columnsByStore",
    parentId: "props",
    prop: "columns-by-store",
    explain: "存储表头数据, 指定初始无扩展性的表头数据用于列设置操作",
    type: "array",
    optional: "必需, 详见 columns",
    default: ""
  },
  { id: "loading", parentId: "props", prop: "loading", explain: "页面加载状态", type: "boolean", optional: "", default: "false" },
  { id: "maxFixed", parentId: "props", prop: "max-fixed", explain: "最大固定列数", type: "number", optional: "", default: "4" },
  { id: "border", parentId: "props", prop: "border", explain: "是否展示边框", type: "boolean", optional: "", default: "false" },
  {
    id: "align",
    parentId: "props",
    prop: "align",
    explain: "所有的列对齐方式",
    type: "string",
    optional: "center | left | right",
    default: "left"
  },
  {
    id: "headerAlign",
    parentId: "props",
    prop: "header-align",
    explain: "所有的表头列的对齐方式",
    type: "string",
    optional: "center | left | right",
    default: "center"
  },
  {
    id: "showHeader",
    parentId: "props",
    prop: "show-header",
    explain: "是否展示顶部插槽与工具栏的渲染内容",
    type: "boolean",
    optional: "",
    default: "true"
  },
  {
    id: "enabledTree",
    parentId: "props",
    prop: "enabled-tree",
    explain: "开启树结构, 开启后会禁用斑马行样式及合计行",
    type: "boolean",
    optional: "",
    default: "false"
  },
  {
    id: "enabkedScroll",
    parentId: "props",
    prop: "enabled-scroll",
    explain: "开启虚拟滚动, 开启后行内元素转换为超出省略号模式并使用 tip 提示文本内容",
    type: "boolean",
    optional: "",
    default: "true"
  },
  {
    id: "treeTransform",
    parentId: "props",
    prop: "tree-transform",
    explain: "树表格结构, 设置为 true 使用父子层级列表, 自动将列表转为树结构, 否则使用树层级的结构",
    type: "boolean",
    optional: "",
    default: "false"
  },
  {
    id: "treeExpandAll",
    parentId: "props",
    prop: "tree-expand-all",
    explain: "是否展示所有的树节点",
    type: "boolean",
    optional: "",
    default: "true"
  },
  {
    id: "rowHeight",
    parentId: "props",
    prop: "row-height",
    explain: "指定行高, 配合自定义插槽建立可换行展示数据",
    type: "number",
    optional: "",
    default: "40"
  },
  { id: "rowKey", parentId: "props", prop: "row-key", explain: "指定行数据的 Key", type: "string", optional: "", default: "id" },
  {
    id: "parentKey",
    parentId: "props",
    prop: "parent-key",
    explain: "指定树结构行数据父节点的 Key",
    type: "string",
    optional: "",
    default: "parentId"
  },
  {
    id: "params",
    parentId: "props",
    prop: "params",
    explain: "使用高级搜索传入的表单搜索数据",
    type: "object",
    optional: "",
    default: ""
  },
  { id: "data", parentId: "props", prop: "data", explain: "表格数据", type: "array", optional: "", default: "" },
  {
    id: "columnMinWidth",
    parentId: "props",
    prop: "column-min-width",
    explain: "默认最小列宽",
    type: "number",
    optional: "",
    default: "80"
  },
  {
    id: "columns",
    parentId: "props",
    prop: "columns",
    explain: "表头数据",
    type: "array",
    optional: "更多详见",
    default: "",
    link: "https://vxetable.cn/#/column/api"
  },
  {
    id: "columns-field",
    parentId: "columns",
    prop: "field",
    explain: "表头 Key, 同时也是表格数据字段名称",
    type: "string",
    optional: "",
    default: ""
  },
  { id: "columns-title", parentId: "columns", prop: "title", explain: "表头展示文字", type: "string", optional: "", default: "" },
  {
    id: "columns-align",
    parentId: "columns",
    prop: "align",
    explain: "列对应单元格文字位置",
    type: "center | left | right",
    optional: "",
    default: ""
  },
  {
    id: "columns-headerAlign",
    parentId: "columns",
    prop: "header-align",
    explain: "表头单元格文字位置",
    type: "center | left | right",
    optional: "",
    default: "center"
  },
  { id: "columns-width", parentId: "columns", prop: "width", explain: "列宽", type: "number", optional: "", default: "" },
  {
    id: "columns-minWidth",
    parentId: "columns",
    prop: "min-width",
    explain: "最小列宽",
    type: "number",
    optional: "",
    default: "80"
  },
  {
    id: "columns-fixed",
    parentId: "columns",
    prop: "fixed",
    explain: "列固定",
    type: "string",
    optional: "left | right",
    default: ""
  },
  {
    id: "columns-visible",
    parentId: "columns",
    prop: "visible",
    explain: "是否展示列",
    type: "boolean",
    optional: "",
    default: "true"
  },
  { id: "columns-params", parentId: "columns", prop: "params", explain: "自定义参数", type: "object", optional: "", default: "" },
  {
    id: "columns-params-disabled",
    parentId: "columns-params",
    prop: "disabled",
    explain: "冻结列, 禁用列设置",
    type: "boolean",
    optional: "",
    default: "false"
  },
  {
    id: "columns-params-summary",
    parentId: "columns-params",
    prop: "summary",
    explain: "合计值",
    type: "number",
    optional: "",
    default: ""
  },
  {
    id: "columns-params-summarySpan",
    parentId: "columns-params",
    prop: "summarySpan",
    explain: "合计值向右合并的单元格数量",
    type: "number",
    optional: "",
    default: ""
  },
  {
    id: "columns-params-searchType",
    parentId: "columns-params",
    prop: "searchType",
    explain: "表格筛选控件类型",
    type: "string",
    optional: "input | select | date | daterange",
    default: ""
  },
  {
    id: "columns-params-searchValue",
    parentId: "columns-params",
    prop: "searchValue",
    explain: "表格筛选默认值, 一般情况下不使用",
    type: "any",
    optional: "",
    default: ""
  },
  {
    id: "columns-params-searchDefaultValue",
    parentId: "columns-params",
    prop: "searchDefaultValue",
    explain: "表格下拉框筛选默认展示文本",
    type: "any",
    optional: "",
    default: ""
  },
  {
    id: "columns-children",
    parentId: "columns",
    prop: "children",
    explain: "表头分组数据",
    type: "array",
    optional: "",
    default: ""
  },
  {
    id: "columns-slots",
    parentId: "columns",
    prop: "slots",
    explain: "前端属性, 扩展插槽",
    type: "object",
    optional: "{default, header}",
    default: ""
  },
  {
    id: "columns-slots-default",
    parentId: "columns-slots",
    prop: "default",
    explain: "行内单元格插槽自定义名称",
    type: "string | function",
    optional: "",
    default: ""
  },
  {
    id: "columns-slots-header",
    parentId: "columns-slots",
    prop: "header",
    explain: "表头单元格插槽自定义名称",
    type: "string | function",
    optional: "",
    default: ""
  },

  {
    id: "columnType",
    parentId: "props",
    prop: "column-type",
    explain: "固定表头集合",
    type: "array",
    optional: "index | selection | multiple",
    default: ""
  },
  { id: "columnType-index", parentId: "columnType", prop: "index", explain: "排序列", type: "", optional: "", default: "" },
  {
    id: "columnType-selection",
    parentId: "columnType",
    prop: "selection",
    explain: "全选列-当前页",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "columnType-multiple",
    parentId: "columnType",
    prop: "multiple",
    explain: "全选列-所有页",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "columnType-expand",
    parentId: "columnType",
    prop: "expand",
    explain: "展开行操作列",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "columnType-handle",
    parentId: "columnType",
    prop: "handle",
    explain: "自定义操作列",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "columnTypeObject",
    parentId: "columnType",
    prop: "columnType-object",
    explain: "自定义列插槽对象",
    type: "object",
    optional: "",
    default: ""
  },
  {
    id: "columnTypeObject-type",
    parentId: "columnTypeObject",
    prop: "type",
    explain: "同上方任意 type 值",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "columnTypeObject-width",
    parentId: "columnTypeObject",
    prop: "width",
    explain: "设置当前列宽, 可选",
    type: "number",
    optional: "",
    default: ""
  },
  {
    id: "columnTypeObject-slot",
    parentId: "columnTypeObject",
    prop: "slot",
    explain: "自定义当前插槽名称或 render 函数",
    type: "string | function(params)",
    optional: "",
    default: ""
  },
  { id: "toolbar", parentId: "props", prop: "toolbar", explain: "表格头部工具栏", type: "array", optional: "", default: "" },

  {
    id: "toolbarExport",
    parentId: "toolbar",
    prop: "export",
    explain: "导出",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "toolbarSetting",
    parentId: "toolbar",
    prop: "setting",
    explain: "列设置",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "toolbarObject",
    parentId: "toolbar",
    prop: "toolbar-object",
    explain: "自定义工具对象",
    type: "object",
    optional: "",
    default: ""
  },
  {
    id: "toolbarObject-type",
    parentId: "toolbarObject",
    prop: "type",
    explain: "同上方任意 type 值或自定义 key",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "toolbarObject-title",
    parentId: "toolbarObject",
    prop: "title",
    explain: "自定义展示文字",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "toolbarObject-icon",
    parentId: "toolbarObject",
    prop: "icon",
    explain: "自定义展示图标",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "batches",
    parentId: "props",
    prop: "batches",
    explain: "为选中行提供自定义的批量操作",
    type: "array",
    optional: "",
    default: ""
  },
  { id: "batches-type", parentId: "batches", prop: "type", explain: "自定义操作名称", type: "string", optional: "", default: "" },
  {
    id: "batches-text",
    parentId: "batches",
    prop: "text",
    explain: "自定义操作展示文字",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "batches-color",
    parentId: "batches",
    prop: "color",
    explain: "自定义操作展示文字字体颜色",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "batches-icon",
    parentId: "batches",
    prop: "icon",
    explain: "自定义工具图标",
    type: "Component",
    optional: "",
    default: ""
  },
  {
    id: "batches-divided",
    parentId: "batches",
    prop: "divided",
    explain: "是否显示分隔符",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "handles",
    parentId: "props",
    prop: "handles",
    explain: "为操作列提供自定义的操作",
    type: "array",
    optional: "",
    default: ""
  },
  { id: "handles-type", parentId: "handles", prop: "type", explain: "自定义操作名称", type: "string", optional: "", default: "" },
  {
    id: "handles-text",
    parentId: "handles",
    prop: "text",
    explain: "自定义操作展示文字",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "handles-color",
    parentId: "handles",
    prop: "color",
    explain: "自定义操作展示文字字体颜色",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "handles-icon",
    parentId: "handles",
    prop: "icon",
    explain: "自定义工具图标",
    type: "Component",
    optional: "",
    default: ""
  },
  {
    id: "handles-divided",
    parentId: "handles",
    prop: "divided",
    explain: "是否显示分隔符",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "pagination",
    parentId: "props",
    prop: "pagination",
    explain: "分页设置",
    type: "false | object",
    optional: "false 禁用分页,其他设置同 ",
    default: "",
    link: "https://element-plus.gitee.io/zh-CN/component/pagination.html#%E5%B1%9E%E6%80%A7"
  },
  {
    id: "batchClick",
    parentId: "props",
    prop: "batch-click",
    explain: "批量操作按钮事件, 返回刷新或重置状态",
    type: "(params) => Promise<{refresh, reset}>",
    optional: "",
    default: ""
  },
  {
    id: "batchClick-type",
    parentId: "batchClick",
    prop: "type",
    explain: "自定义操作名称",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "batchClick-mode",
    parentId: "batchClick",
    prop: "mode",
    explain: "当前选择模式, 当前页 | 所有页",
    type: "current | all",
    optional: "",
    default: ""
  },
  {
    id: "batchClick-selectedKeys",
    parentId: "batchClick",
    prop: "selected-keys",
    explain: "当前选中 | 取消选中的数据的 Key 集合",
    type: "array",
    optional: "",
    default: ""
  },
  {
    id: "handlerClick",
    parentId: "props",
    prop: "handler-click",
    explain: "操作列按钮事件, 返回是否刷新状态",
    type: "(params) => Promise<refresh: boolean>",
    optional: "",
    default: ""
  },
  {
    id: "handlerClick-type",
    parentId: "handlerClick",
    prop: "type",
    explain: "自定义操作名称",
    type: "string",
    optional: "",
    default: ""
  },
  {
    id: "handlerClick-params",
    parentId: "handlerClick",
    prop: "params",
    explain: "自定义操作插槽数据，包括 row 数据等",
    type: "object",
    optional: "",
    default: ""
  },
  {
    id: "queryColumns",
    parentId: "props",
    prop: "queryColumns",
    explain: "数据代理的方式请求表头数据, 返回分页条数及表头数据",
    type: "() => Promise<{pageSize, columns}>",
    optional: "",
    default: ""
  },
  {
    id: "queryOptions",
    parentId: "props",
    prop: "queryOptions",
    explain: "表头筛选下拉控件获取选项的请求, 返回value、label属性的集合",
    type: "(field) => Promise<{value, label}[]>",
    optional: "",
    default: ""
  },
  {
    id: "queryData",
    parentId: "props",
    prop: "queryData",
    explain: "数据代理的方式请求表格数据, 返回数据总计, 当前页及表格数据",
    type: "(params) => Promise<{total, currentPage, list}>",
    optional: "参数见树结构",
    default: ""
  },
  {
    id: "queryData-page",
    parentId: "queryData",
    prop: "page",
    explain: "当前分页选择, {pageSize, currentPage}",
    type: "object",
    optional: "",
    default: ""
  },
  {
    id: "queryData-sorts",
    parentId: "queryData",
    prop: "sorts",
    explain: "当前列表排序数据, {field, order}",
    type: "array",
    optional: "",
    default: ""
  },
  {
    id: "queryData-filters",
    parentId: "queryData",
    prop: "filters",
    explain: "当前列表筛选数据, {field, value}",
    type: "array",
    optional: "",
    default: ""
  },
  {
    id: "queryData-from",
    parentId: "queryData",
    prop: "from",
    explain: "传入的表单查询数据",
    type: "object",
    optional: "",
    default: ""
  },
  { id: "events", parentId: null, prop: "Events", explain: "事件", type: "", optional: "", default: "" },
  {
    id: "events-toolClick",
    parentId: "events",
    prop: "tool-click",
    explain: "点击工具栏按钮",
    type: "function(type)",
    optional: "",
    default: ""
  },
  {
    id: "events-pageChange",
    parentId: "events",
    prop: "page-change",
    explain: "监听分页变动",
    type: "function({pageSize, currentPage})",
    optional: "",
    default: ""
  },
  {
    id: "events-sortChange",
    parentId: "events",
    prop: "sort-change",
    explain: "监听列排序",
    type: "function(sorts)",
    optional: "",
    default: ""
  },
  {
    id: "events-filterChange",
    parentId: "events",
    prop: "filter-change",
    explain: "监听列筛选",
    type: "function(filters)",
    optional: "",
    default: ""
  },
  {
    id: "events-config-change",
    parentId: "events",
    prop: "config-change",
    explain: "监听表格配置项变动, 分页条数切换及列设置",
    type: "function({pageSize, columns})",
    optional: "",
    default: ""
  },
  { id: "methods", parentId: null, prop: "Methods", explain: "方法", type: "", optional: "", default: "" },
  {
    id: "methods-reloadData",
    parentId: "methods",
    prop: "reloadData",
    explain: "刷新表格, 仅重新加载表格数据",
    type: "function",
    optional: "",
    default: ""
  },
  {
    id: "methods-reloadTable",
    parentId: "methods",
    prop: "reloadTable",
    explain: "重置表格, 重置选中、排序、筛选、分页后请求数据",
    type: "function",
    optional: "",
    default: ""
  },
  {
    id: "slots",
    parentId: null,
    prop: "Slots",
    explain: "插槽",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "slots-tools",
    parentId: "slots",
    prop: "tools",
    explain: "表格顶部左侧插槽",
    type: "",
    optional: "",
    default: ""
  },
  {
    id: "slots-expand",
    parentId: "slots",
    prop: "expand",
    explain: "表格展开行渲染插槽",
    type: "",
    optional: "",
    default: ""
  }
]);
</script>
